<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{:session('cp.cpsysname')}--服务商管理平台</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="{:config('webconfig.description');}">
    <meta name="keywords" content="{:config('webconfig.keywords');}">
    <meta name="author" content="runoob">
    <link rel="stylesheet" href="__STATIC_URL__/static/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/css/index.css"/>
    <script src="__STATIC_URL__/static/jquery/2.2.1/jquery.min.js"></script>
    <script src="__STATIC_URL__/static/js/bootstrap-datetimepicker.js" type="text/javascript" charset="utf-8"></script>
    <script src="__STATIC_URL__/static/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="__STATIC_URL__/static/layer/layer.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

{include file='public/header'/}
<!------------------导航-------------------------->
<section>
    {include file='public/left'/}
    <!--------------------------主要内容区域------------------------------------->
    <div class="content">
        <div class="page-heading mgl15 mgr15">
            <ul class="breadcrumb">
                <li>当前位置是&nbsp;:&nbsp;</li>
                <li><a href="#">微信管理</a></li>
                <li class="active" style="color: #02b87f;">小程序预约列表</li>
            </ul>
        </div>

        <div class="panel panel-default mgl15 mgr15">
            <div class="panel panel-search panel-default mgl15 mgr15">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        筛选分类
                    </h3>
                </div>
                <div class="panel-body">
                    <form action="" method="get" class="form-horizontal table-search form-search" role="form" id="machform">
                        <div class="col-sm-6 col-md-6 col-lg-4 ">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">门店：</label>
                                <div class="col-sm-9">
                                    <select name="merchname" class="form-control">
                                         <option value=""></option>
                                        {volist name="machlist" id="search"}
                                        <option value="{$search.merchant}" {if condition="$p_data['merchname'] eq $search.merchant " } selected {/if}>{$search.merchant}</option>
                                        {/volist}
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-6 col-lg-4">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">姓名：</label>
                                <div class="col-sm-9">
                                    <input type="text" name="xingming" class="form-control" placeholder="请输入姓名" value="{$p_data['xingming']}">
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-6 col-lg-4">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">电话：</label>
                                <div class="col-sm-9">
                                    <input type="text" name="tel" class="form-control" placeholder="电话" value="{$p_data['tel']}">
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-6 col-lg-4">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">预约时间：</label>
                                <div class="col-sm-9">
                                    <div class="input-group">
                                        <input name="starttime" type="text" value="{$p_data['starttime']}" readonly="readonly" id="starttime" placeholder="请选择" class="form-control">
                                        <div class="input-group-addon">至</div>
                                        <input name="endtime" type="text" value="{$p_data['endtime']}" readonly="readonly" id="endtime" class="form-control" placeholder="请选择">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="panel-footer">
                    <a href="javascript:;" class="btn btn-primary" onclick="searchform()">查找</a>
                    <a href="javascript:;" class="btn btn-default" onclick="clearform()">清空</a>
                </div>

                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane active in" id="home">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">预约列表</h3>
                            </div>
                            <table class="table table-bordered">

                                <thead>
                                <tr>
                                    <th>商户名称</th>
                                    <th>姓名</th>
                                    <th>性别</th>
                                    <th>电话</th>
                                    <th>预约时间</th>
                                    <th>添加时间</th>
                                </tr>
                                </thead>
                                <tbody>
                                {volist name="list" id="vo" key="k"}
                                <tr>
                                    <td>{$vo['merchname']}</td>
                                    <td>{$vo['xingming']}</td>
                                    <td>{$vo['sex']}</td>
                                    <td>{$vo['tel']}</td>
                                    <td>{$vo['yytime']}</td>
                                    <td>{$vo['addtime']|date="Y-m-d H:i:s",###}</td>
                                </tr>
                                {/volist}

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {$list->render()}
        {include file='public/footer'/}
    </div>
</section>

</body>

<script>
    function searchform(){

        $('#machform').submit();

    }
    $(function () {
        //        搜索时间选择
        $('#starttime').datetimepicker({
            minView: "month", //选择日期后，不会再跳转去选择时分秒
            language: 'zh-CN',
            format: 'yyyy-mm-dd',
            todayBtn: 1,
            autoclose: 1,
            todayHighlight: true,
            endDate: new Date()
        }).on('changeDate', function (ev) {
            var starttime = $('#starttime').val();
            var endtime = $('#endtime').val();
            if (starttime != "" && endtime != "") {
                var startD = new Date(Date.parse(starttime.replace(/-/g, "/")));
                var endD = new Date(Date.parse(endtime.replace(/-/g, "/")));
                var days = parseInt((endD.getTime() - startD.getTime()) / (1000 * 60 * 60 * 24));
                if (days > 31) {
                    alert("日期范围应在一个月之内");
                    $('#starttime').val('');
                    return false;
                }
                ;
                if (endtime < starttime) {
                    $('#starttime').val('');
                    alert('结束时间必须大于大于时间');
                    return;
                }
                ;
                $("#endtime").datetimepicker('setStartDate', starttime);
                $("#starttime").datetimepicker('hide');
            }
        });
        $('#endtime').datetimepicker({
            minView: "month", //选择日期后，不会再跳转去选择时分秒
            language: 'zh-CN',
            format: 'yyyy-mm-dd',
            todayBtn: 1,
            autoclose: 1,
            todayHighlight: true,
            endDate:new Date()
        }).on('changeDate', function (ev) {
            var starttime = $('#starttime').val();
            var endtime = $('#endtime').val();
            if (starttime != "" && endtime != "") {
                var startD = new Date(Date.parse(starttime.replace(/-/g, "/")));
                var endD = new Date(Date.parse(endtime.replace(/-/g, "/")));
                var days = parseInt((endD.getTime() - startD.getTime()) / (1000 * 60 * 60 * 24));
                if (days > 31) {
                    $('#endtime').val('');
                    alert('日期范围应在一个月之内');
                    return;
                }
                if (endtime < starttime) {
                    $('#endtime').val('');
                    alert('结束时间必须大于开始时间');
                    return;
                }
                $("#starttime").datetimepicker('setEndDate', endtime);
                $("#endttime").datetimepicker('hide');
            }
        });



    });
</script>
</html>


